<template>
  <div
    class="generalize.vue"
    v-loading="loading"
  >
    <div
      v-if="dateils"
      class="ditle_box"
    >
      <h2 class="ditle_h">{{dateils.title}}</h2>
      <div class="ditle_title_box">
        <span class="ditle_title">作者: </span>
        <span class="ditle_title title_mar">{{dateils.author==null?'暂无作者信息':dateils.author}}</span>
        <span class="ditle_title">发布时间</span>
        <span class="ditle_title title_mar">{{dateils.createdTime}}</span>
        <span class="ditle_title">点击率：</span>
        <span class="ditle_title">50</span>
      </div>
      <img
        class="ditle_off"
        src="../assets/imges/zhixian.png"
        alt=""
      >
      <!-- <img
        style="width: 100%; margin-bottom: 30px"
        :src="dateils.img"
        alt=""
      > -->
      <div
        class="ditle_conte"
        ref="ditle"
      >
        <!-- <p class="ditle_conte_title">因市政道路施工，公交7路、25路于2020年3月29日起实施临时绕行，截止至4月1日，信阳公交临时绕行的线路有7路、8路、9路、13路、25路，请广大市民注意提前做好出行安排，给您带来的不便敬请谅解！具体绕行线路和站点如下：
        </p>
        <div
          v-for="(item,index) in ditleList"
          :key="index"
        >
          <p class="ditle_conte_title">{{item.title}} :</p>
          <p class="ditle_conte_title"><span class="ditle_item_title">{{item.shuang.title}}:</span>{{item.shuang.conter}}</p>
          <p class="ditle_conte_title"><span class="ditle_item_title">{{item.she.title}}:</span>{{item.she.conter}}</p>
          <p class="ditle_conte_title"><span class="ditle_item_title">{{item.quxiao.title}}:</span>{{item.quxiao.conter}}</p>
          <p class="ditle_conte_title">{{item.content}}</p>
        </div> -->
      </div>
      <!-- <div class="ditle_foot">
        <div class="foot_ab">
          <p>{{dateils.author==null?'暂无作者信息':dateils.author}}</p>
          <p style="">{{dateils.createdTime}}</p>
        </div>
      </div> -->
      <div class="up_dow_box">
        <div>
          <span class="up_dow up">上一篇:</span>
          <span
            @click="handUpDow(dowObj)"
            :class="[dowObj==undefined?'':'dow_cont pointer']"
          >{{dowObj==undefined?'没有更多':dowObj.title}}</span>

        </div>
        <div>
          <span class="up_dow dow">下一篇:</span><span
            @click="handUpDow(upObj)"
            :class="[upObj!=undefined?'dow_cont pointer':'']"
          >{{upObj==undefined?'没有更多':upObj.title}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "generalize.vue",
  props: {
    dateils: {
      type: Object
    },
    sonList: {
      type: Array
    }
  },
  watch: {
    dateils(newObj, oldObj) {
      this.newdateils = newObj;
      this.$nextTick(() => {
        if (this.dateils && this.$refs.ditle != undefined) {
          this.$refs.ditle.innerHTML = this.dateils.wangEditor;
          var index = this.sonList.findIndex((value, index, arr) => {
            return value.id == this.dateils.id;
          });
          this.dowObj = this.sonList[index - 1];
          this.upObj = this.sonList[index + 1];
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.dateils && this.$refs.ditle != undefined) {
        this.$refs.ditle.innerHTML = this.dateils.wangEditor;
        var index = this.sonList.findIndex((value, index, arr) => {
          return value.id == this.dateils.id;
        });
        this.dowObj = this.sonList[index - 1];
        this.upObj = this.sonList[index + 1];
      }
    });
    this.loading = false;
  },
  data() {
    return {
      newdateils: {},
      loading: true,
      ditleList: [],
      upObj: {},
      dowObj: {}
    };
  },

  methods: {
    handUpDow(obj) {
      console.log(obj);
      if (obj == undefined) return;
      var that = this;
      this.loading = true;
      setTimeout(function() {
        that.$refs.ditle.innerHTML = obj.wangEditor;
        that.newdateils = obj;
        var index = that.sonList.findIndex((value, index, arr) => {
          return value.id == obj.id;
        });
        that.dowObj = that.sonList[index - 1];
        that.upObj = that.sonList[index + 1];
        that.loading = false;
      }, 666);
    }
  }
};
</script>

<style lang='scss' scoped>
.up_dow_box {
  .up_dow {
    font-weight: 600;
    margin-right: 12px;
  }
  .dow_cont {
    color: #24c2f7;
  }
  text-align: left;
  line-height: 35px;
  color: #333;
  font-size: 16px;
  letter-spacing: 0.8px;
}
.ditle_foot {
  line-height: 35px;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  letter-spacing: 0.8px;
  text-align: left;
  margin-bottom: 120px;
  .foot_ab {
    text-align: right;
  }
}
.notice {
  line-height: 35px;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  letter-spacing: 0.8px;
  text-align: left;
  margin-top: 60px;
  margin-bottom: 60px;
}
.ditle_conte {
  text-align: left;
  .ditle_item_title {
    margin-right: 8px;
  }
  .ditle_conte_title {
    line-height: 35px;
    color: rgba(51, 51, 51, 1);
    font-size: 16px;
    letter-spacing: 0.8px;
  }
}
.ditle_box {
  text-align: center;
  .ditle_off {
    margin-top: 15px;
    margin-bottom: 39px;
  }
  .ditle_title_box {
    .title_mar {
      margin-right: 20px;
    }
    .ditle_title {
      color: rgba(128, 128, 128, 1);
      font-size: 12px;
      letter-spacing: 2px;
    }
    text-align: center;
  }

  .ditle_h {
    color: #333333;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    // font-size: 20px;
    // font-weight: 400;
  }
}
</style>
